import styled from 'styled-components';

const Wrapper = styled.section`
  .output{
    background: #FFF;
    font-size:32px;
    line-height: 56px;
    text-align: right;
    padding-right:16px;
    box-shadow: inset 0 -5px 5px -5px rgba(0,0,0,0.25),
                inset 0 5px 5px -5px rgba(0,0,0,0.25);
  }
  .pad{
    padding: 3px;
  }
`;

const NumberWrapper = styled.div`
  width: 25%;
  padding: 3px;
  float: left;
  text-align: center;
  >button{
    width: 100%;
    height: 48px;
    line-height:18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    background: #FFF;
  }
  &.zero {
    width: 50%;
  }
  &.enter {
    >button{
      height: 102px;
      background: steelblue;
      color: #FFF;
      &:disabled {
        filter: opacity(65%);
      }
    }
    float: right;
  }
`

export {Wrapper, NumberWrapper};